<template>
	<view class="content">
		<u-navbar title="团购" :placeholder='true' height="88rpx" leftIconColor="#fff" titleStyle='color:#fff;font-size:32rpx'
			left-icon-size="32rpx" bg-color="#FF594D" :autoBack="true">
		</u-navbar>
		<!-- <view class="search_content">
			<u-search placeholder="请输入商品名称" :inputStyle="style" v-model="keywords" height="68rpx" searchIconColor="#777777"
				placeholderColor="#777777" color="#777" bgColor="#ffffff" :showAction='false' @search="search"></u-search>
		</view> -->
		<view class="tabs">
			<view :class="['tabs_item',value==0?'current':'']" @click="changeTab(0)">
				<text>正在团购</text>
			</view>
			<!-- <view :class="['tabs_item arrow_content',value==1?'current':'']" @click="changeTab(1)">
				<text>价格</text>
				<view :class="['arrow',rotate?'rotate':'' ]">
					<image class="top_arrow" src="../../static/images/search/Vector@2x (1).png" mode=""></image>
					<image class="bottom_arrow" src="../../static/images/search/Vector@2x.png" mode=""></image>
				</view>
			</view> -->
			<view :class="['tabs_item',value==2?'current':'']" @click="changeTab(2)"> <text>团购商品</text>
			</view>
		</view>
		<view class="new_product" v-if="value==0">
			<view class="new_product_list">
				<template v-for="(item,index) in list1">
					<view class="goods_item" :key="index" v-if="item.buyQuantity!=item.joinQuantity">
						<navigator :url="`/pages_goods/group-detail/group-detail?id=${item.id}`">
							<image :src="item.image" mode=""></image>
							<view class="goods_de">
								<text class="goods_title">{{item.commodityName}}</text>
								<view class="price">
									<view class="current_price">
										￥{{item.specificationPrice.toFixed(2)}}
									</view>
									<view class="original_price">
										<!-- ￥{{item.list[0]?item.list[0].priceOriginally.toFixed(2):''}} -->
									</view>
								</view>
							</view>
						</navigator>
						<view class="buy">
							已有{{item.joinQuantity}}人参团
						</view>
					</view>
				</template>
			</view>
		</view>
		<view class="new_product" v-if="value==2">
			<view class="new_product_list">
				<template v-for="(item,index) in list1">
					<view class="goods_item" :key="index" v-if="item.inventory>item.buyNumber">
						<navigator :url="`/pages_goods/detail-page/detail-page?id=${item.id}&commodityType=${item.commodityType}`">
							<image :src="item.image" mode=""></image>
							<view class="goods_de">
								<text class="goods_title">{{item.commodityName}}</text>
								<view class="price">
									<view class="current_price">
										￥{{item.list[0]?item.list[0].specificationPrice.toFixed(2):''}}
									</view>
									<view class="original_price">
										￥{{item.list[0]?item.list[0].priceOriginally.toFixed(2):''}}
									</view>
								</view>
							</view>
						</navigator>
						<!-- 			<view class="buy" @click="sponsorGroun(item)">
							发起拼团
						</view> -->
					</view>
				</template>
			</view>
		</view>
		<view class="not" v-show="!list1[0]">
			暂无数据
		</view>
	</view>
</template>

<script>
	import {
		getCommodity,
		getBuy,
		getBuyInfo,
		addBuy
	} from '../../api/index.js'
	export default {
		data() {
			return {
				titleStyle: {
					color: '#fff',
				},
				keywords: '',
				style: {
					'font-size': '24rpx'
				},
				rotate: false,
				value: 0,
				list1: [],
				list2: [],
				search_text: '',

			}
		},
		created() {
			// if (!this.$store.getters.getIsLogin) {
			// 	uni.navigateTo({
			// 		url: '/pages_mine/pages/login/login'
			// 	})
			// 	return
			// }
			this.getBuyData()
		},
		methods: {
			async search(e) {
				// console.log(e);
				const res = await getCommodity({
					commodityType: 2,
					commodityName: e
				})
				// console.log(res);
				this.list1 = res.rows
				this.search_text = e
			},
			changeTab(index) {
				this.value = index
				// console.log(index);
				switch (index) {
					case 0:
						this.getBuyData()
						break;
					case 1:
						// this.rotate = this.rotate ? false : true;
						// this.list1.sort((a, b) => {
						// 	if (this.rotate) {
						// 		return b.list[0].specificationPrice - a.list[0].specificationPrice
						// 	} else {
						// 		return a.list[0].specificationPrice - b.list[0].specificationPrice
						// 	}
						// });
						break
					case 2:
						this.list1 = [{
							list: [{
								specificationPrice: 1,
								priceOriginally: 1
							}]
						}];
						(async () => {
							const res = await getCommodity({
								commodityType: 2,
							})
							// console.log(res);
							this.list1 = res.rows
						})()
						break
				}
			},
			async sponsorGroun(goodsInfo) {
				if (!this.$store.getters.getIsLogin) {
					uni.navigateTo({
						url: '/pages_mine/pages/login/login'
					})
					return
				}
				const res = await addBuy({
					createBy: this.$store.state.userInfo.id,
					sponsorId: this.$store.state.userInfo.id,
					commodityId: goodsInfo.id,
					commodityName: goodsInfo.commodityName,
					image: goodsInfo.image,
					specificationName: goodsInfo.list[0].specificationName,
					specificationId: goodsInfo.list[0].id,
					specificationPrice: goodsInfo.list[0].specificationPrice,
					specificationNumber: 1,
					xxx: this.$store.state.user.name
				})
				console.log(res);
				if (res.code == 200) {
					uni.navigateTo({
						url: `/pages_mine/pages/order-form/order-form?id=${goodsInfo.id}&number=1&buyNumber=${res.data.buyNumber}`
					})
				}
			},
			async getBuyData() {
				this.list1 = {

				};
				const res = await getBuy()
				// console.log(res);
				this.list1 = res.rows
			},
		}
	}
</script>

<style lang="scss">
	.content {
		background-color: #f3f3f3;
		min-height: 100vh;

		.goods_item {
			border-radius: 10rpx;
			background-color: #fff;
			width: 340rpx;
			position: relative;
			padding-bottom: 16rpx;
			overflow: hidden;
			margin-bottom: 30rpx;

			image {
				width: 340rpx;
				// display: block;
				height: 340rpx;
			}

			.goods_title {
				font-size: 26rpx;
				line-height: 30rpx;
				display: block;
				margin-bottom: 36rpx;
			}

			.goods_de {
				padding: 0 10rpx;
			}

			.price {
				display: flex;
				align-items: flex-start;

				.current_price {
					color: #FF594D;
					font-size: 32rpx;
				}

				.original_price {
					color: #D4D4D4;
					font-size: 24rpx;
					line-height: 40rpx;
					text-decoration: line-through;
				}
			}

			.buy {
				border-radius: 20rpx;
				height: 44rpx;
				// width: 120rpx;
				box-sizing: border-box;
				color: #FF594D;
				font-size: 20rpx;
				padding: 0 20rpx;
				line-height: 42rpx;
				border: 2rpx solid #FF594D;
				position: absolute;
				right: 10rpx;
				bottom: 16rpx;

				button {}
			}
		}

		.not {
			text-align: center;
		}

		.topline {
			height: 88rpx;
			// #ifdef MP
			height: 184rpx;
			// #endif
		}

		.search_content {
			padding: 20rpx;
		}

		.tabs {
			display: flex;
			height: 88rpx;
			background-color: #fff;
			padding: 0 36rpx;
			justify-content: space-between;
			align-items: center;
			color: #777777;
			font-size: 26rpx;
			margin-bottom: 20rpx;

			.rotate {
				transform: rotate(180deg);
				// margin-left: 20rpx;
				padding-left: 0;
				// padding-right: 20rpx;
			}

			.arrow_content {
				text {
					padding-right: 20rpx;
				}

			}

			.tabs_item {
				display: flex;
				width: 260rpx;
				justify-content: center;
				position: relative;

				&.current {
					color: #FF594D;

				}

				&.current::after {
					content: "";
					position: absolute;
					width: 52rpx;
					height: 4rpx;
					background-color: #FF594D;
					border-radius: 666rpx;
					bottom: -14rpx;
				}



				.arrow {
					display: flex;
					flex-direction: column;
					justify-content: center;
					// padding-left: 20rpx;

					image {
						width: 17rpx;
						height: 10rpx;

						&.top_arrow {
							margin-bottom: 5rpx;
						}

						&.bottom_arrow {
							margin-top: 5rpx;
						}
					}
				}
			}
		}
	}

	.new_product {

		padding: 0 25rpx 144rpx;
		display: flex;
		justify-content: space-between;

		.new_product_list {
			display: flex;
			flex-wrap: wrap;
			width: 100%;
			justify-content: space-between;
		}
	}
</style>